<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>层次选择器</title>
	</head>
	<body>
		<!-- 
			后代选择器 
				格式：父元素 指定元素（空格隔开）
			子代选择器
		 -->
		 <div id="parents">
			 <div id="child" class="testColor">父选择器
				 <div class="gray">子选择器</div>
				<img src="" width="100" height="200" />	 
				<img src="" width="100" height="200" />	 
				 
			 </div>
			 <div>选择器2   <div>选择器2中的div</div>
			 </div>
		 </div>
	</body>
	<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		
		//后代选择器
		var hd=$("#parents div");
		console.log("后代选择器");
		console.log(hd);
		//子代选择器
		var zd=$("#parents>div");
		console.log("子代选择器");
		console.log(zd);
		
		
		//相邻选择器--必须是挨着的，中间不能有其他元素
		var xl=$("#child+div");
		console.log("相邻选择器");
		console.log(xl);
		
		//同辈选择器---元素由此标记往下的元素
		var tb=$(".gray~img");
		console.log("同辈选择器");
		console.log(tb);
	</script>
</html>
